
<!DOCTYPE html>
<html>
<include file="public@head"/>
<body>
<include file="public@nav"/>
<div class="container">
    <div class="row">
        <div id="slide">
            <div class="hd">
                <ul>
                    <li class="on"></li>
                </ul>
            </div>
            <div class="bd">
                <div class="tempWrap" style="overflow:hidden; position:relative;">
                    <ul style="width: 3840px; position: relative; overflow: hidden; padding: 0px; margin: 0px; transition-duration: 200ms; transform: translateX(-768px);">
                        <volist name="slide" id="v">
                            <li style="display: table-cell; vertical-align: top; width: 768px;">
                                <a href="http://m.legendshop.cn/m_search/list?categoryId=36" target="_blank">
                                    <img src="/upload/{$v.image}" alt="女包" ppsrc="__TMPL__/public/assets/img/0da8eb94-0159-4700-a6a5-bc007da5a853.jpg">
                                </a>
                            </li>
                        </volist>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script charset="utf-8" src="__TMPL__/public/assets/js/TouchSlide.js"></script>

    <script type="text/javascript">

        TouchSlide({
            slideCell:"#slide",
            titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
            mainCell:".bd ul",
            effect:"left",
            autoPlay:true,//自动播放
            autoPage:true, //自动分页
            switchLoad:"_src" //切换加载，真实图片路径为"_src"
        });
    </script>
    <div class="row category">
        <a href="/m_search/list?param.hot='Y'" class="col-xs-6">
            <h4>鸡蛋状况</h4>
        </a>
        <a href="/m_search/list?param.commend='Y'" class="col-xs-6">
            <h4>平台数据</h4>
        </a>

    </div>

    <div class="row" data-toggle="buttons" id="kline">
            <a class="btn  focus col-xs-2" id="m1"  onclick="k_line(1)">1分钟线</a>
            <a class="btn  col-xs-2" id="m5"  onclick="k_line(5)">5分钟线</a>
            <a class="btn  col-xs-2" id="m15"  onclick="k_line(15)">15分钟线</a>
            <a class="btn  col-xs-2" id="m30"  onclick="k_line(30)">30分钟线</a>
            <a class="btn  col-xs-2" id="m60"  onclick="k_line(60)">1小时线</a>
    </div>
    <div id="main" class="row" style="height: 300px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        myChart.title = '2018年 牛币指数';
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

        k_line(1); // 默认显示1分钟K线图

        $('.btn').click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('focus');
            $(this).siblings().removeClass('focus');
        });
        // 点击时显示不同时间K线

        setInterval(function () {
            $('.focus').trigger("click");
        },60000);
        // 设置K线刷新时间

        function k_line(kind){

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "/portal/index/kline",    //请求发送到TestServlet处
                data : {'kind':kind},
                dataType : "json",        //返回数据形式为json
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        rawData = result;
                        function calculateMA(dayCount, data) {
                            var result = [];
                            for (var i = 0, len = data.length; i < len; i++) {
                                if (i < dayCount) {
                                    result.push('-');
                                    continue;
                                }
                                var sum = 0;
                                for (var j = 0; j < dayCount; j++) {
                                    sum += data[i - j][1];
                                }
                                result.push(sum / dayCount);
                            }
                            return result;
                        }

                        var dates = rawData.map(function (item) {
                            return item[0];
                        });

                        var data = rawData.map(function (item) {
                            return [+item[1], +item[2], +item[5], +item[6]];
                        });

                        myChart.hideLoading();    //隐藏加载动画

                        myChart.setOption({
                            backgroundColor: '#ffffff',
                            legend: {
                                data: ['K线', 'MA5', 'MA10', 'MA20', 'MA30'],
                                inactiveColor: '#777',
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    animation: false,
                                    type: 'cross',
                                    lineStyle: {
                                        color: '#376df4',
                                        width: 2,
                                        opacity: 1
                                    }
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: dates,
                                axisLine: { lineStyle: { color: '#8392A5' } }
                            },
                            yAxis: {
                                scale: true,
                                axisLine: { lineStyle: { color: '#8392A5' } },
                                splitLine: { show: false }
                            },
                            grid: {
                                bottom: 80
                            },
                            dataZoom: [{
                                textStyle: {
                                    color: '#8392A5'
                                },
                                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                                handleSize: '80%',
                                dataBackground: {
                                    areaStyle: {
                                        color: '#8392A5'
                                    },
                                    lineStyle: {
                                        opacity: 0.8,
                                        color: '#8392A5'
                                    }
                                },
                                handleStyle: {
                                    color: '#fff',
                                    shadowBlur: 3,
                                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                                    shadowOffsetX: 2,
                                    shadowOffsetY: 2
                                }
                            }, {
                                type: 'inside'
                            }],
                            animation: false,
                            series: [
                                {
                                    type: 'candlestick',
                                    name: 'K线',
                                    data: data,
                                    itemStyle: {
                                        normal: {
                                            color: '#FD1050',
                                            color0: '#0CF49B',
                                            borderColor: '#FD1050',
                                            borderColor0: '#0CF49B'
                                        }
                                    }
                                },
                                {
                                    name: 'MA5',
                                    type: 'line',
                                    data: calculateMA(5, data),
                                    smooth: true,
                                    showSymbol: false,
                                    lineStyle: {
                                        normal: {
                                            width: 1
                                        }
                                    }
                                },
                                {
                                    name: 'MA10',
                                    type: 'line',
                                    data: calculateMA(10, data),
                                    smooth: true,
                                    showSymbol: false,
                                    lineStyle: {
                                        normal: {
                                            width: 1
                                        }
                                    }
                                },
                                {
                                    name: 'MA20',
                                    type: 'line',
                                    data: calculateMA(20, data),
                                    smooth: true,
                                    showSymbol: false,
                                    lineStyle: {
                                        normal: {
                                            width: 1
                                        }
                                    }
                                },
                                {
                                    name: 'MA30',
                                    type: 'line',
                                    data: calculateMA(30, data),
                                    smooth: true,
                                    showSymbol: false,
                                    lineStyle: {
                                        normal: {
                                            width: 1
                                        }
                                    }
                                }
                            ]
                        });
                    }

                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    // alert(errorMsg);
                    console.log(errorMsg);
                    myChart.hideLoading();
                }
            });

        }

    </script>
    <div class="row">
        <!--产品块-->
        <div class="tb_box">
            <h2 class="tab_tit">
                <a class="more" href="{:cmf_url('portal/list/index',array('id'=>2))}">更多</a>
                公告
            </h2>
            <div class="sort-arat" style="margin-top: 10px;">

                <ul>
                    <volist name="notice" id="v">
                        <li>
                            <a href="category_list.html">
                                <img alt="图片大小为100*100" style="width:initial;height:100px;" src="/upload/{$v.more.thumbnail}" >
                                <p class="content-excerpt">{$v.post_title}</p>
                            </a>
                        </li>
                    </volist>
                </ul>

            </div>
        </div>
        <!--产品块-->
        <div class="tb_box">
            <h2 class="tab_tit">
                <a class="more" href="{:cmf_url('portal/list/index',array('id'=>2))}">更多</a>
                学堂
            </h2>
            <div class="sort-arat" style="margin-top: 10px;">

                <ul>
                    <volist name="study" id="v">
                        <li>
                            <a href="category_list.html">
                                <img alt="图片大小为100*100" style="width:initial;height:100px;" src="/upload/{$v.more.thumbnail}" >
                                <p class="content-excerpt">{$v.post_title}content-limitcontent-limitcontent-limitcontent-limitcontent-limitcontent-limitcontent-limitcontent-limitcontent-limitcontent-limit</p>
                            </a>
                        </li>
                    </volist>
                </ul>

            </div>
        </div>
        <!--产品块-->

        <div class="tb_box">
            <h2 class="tab_tit">
                <a class="more" href="{:cmf_url('portal/list/index',array('id'=>2))}">更多</a>
                咨询
            </h2>

            <div class="sort-arat" style="margin-top: 10px;">

                <ul>
                    <volist name="application" id="v">
                        <li>
                            <a href="category_list.html">
                                <img alt="图片大小为100*100" style="width:initial;height:100px;" src="/upload/{$v.more.thumbnail}" >
                                <p class="content-excerpt">{$v.post_title}</p>
                            </a>
                        </li>
                    </volist>
                </ul>

            </div>
        </div>
    </div>
</div>

<div class="foot_index">
    <div class="foot_index_tit">Aim Beauty Limited(HongKong)</div>
    <div class="foot_index_rx">服务热线：020-123456</div>

</div>


<include file="public@footer"/>

</body></html>

